
<link rel="stylesheet" type="text/css"
	href="../styles/milestoneStyle.css">

<link type="text/css"
	href="../styles/ui-darkness/jquery-ui-1.8.16.custom.css"
	rel="stylesheet" />
<script type="text/javascript" src="../scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript"
	src="../scripts/jquery-ui-1.8.16.custom.min.js"></script>



<%@page contentType="text/html" import="java.util.*"%>
<%@ page import="controlsystem.CourseManager" %>
<%@ page import="controlsystem.Course" %>
<%@ page import="java.util.List" %>
<%@ page import="managesystem.Student" %>
<%
 Student currStud = (Student) session.getAttribute("currStud");
 %>

<script>
 
$(document).ready(function() {  
 
   
    $('a[name=modal]').click(function(e) {
        e.preventDefault();
        var id = $(this).attr('href');
     
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
     
        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
         
        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  
     
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
               
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
     
        //transition effect
        $(id).fadeIn(2000); 
     
    });
     
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });     
     
    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });  

 // Datepicker
	$('#datepicker').datepicker({
		inline: true 
		
	});     

	//$(".selectType").change(function() {
	
 

});
 
</script>





<a href="#dialog" name="modal">Simple Modal Window</a>

<div id="boxes">


	
  <!--window om milestones toe te voegen  -->
	<div id="dialog" class="window">
		<b>
		

			<form action="/Milestone" method="post">
				<td><u><b> Nieuwe Milestone</b></u></td> </br>
				<td>Selecteer het vak:</td>
				<td><select id="vak" name="vak" class="txtBox">						
						<option value="">-selecteer-</option>
						
						<%
	                 List<Course> courses=currStud.getCourses();
		            Iterator it = courses.iterator();
		           while (it.hasNext()) {
			        Course course = (Course)it.next();
		             %> <!-- alle vakken invoegen -->
						<option value="<%=course.getName()%>"><%=course.getName()%></option>
						<%
						} 
						%>
					
			
				</select></td>
				<td><span id="msg_gender"></span>&nbsp;</td> </br>


				<td>Beschrijving: <input type="text" name="description" /></td> </br>

				<div>

					<p>
						Date: <input type="text" id="datepicker" name="datepicker">
					</p>

				</div>


				<input type="button" id="duurButton" value="Duur toevoegen">

				<input type="button" id="pagButton"
					value="Aantal pagina's toevoegen">



				<script>

	    $('#duurButton').click(function () { 
	    if($(this).val()=="Duur toevoegen"){    
	     $('#duration').val(0);
	     $('#duur').show();
    	
    	$(this).val("Duur verwijderen");
    	$('#pagButton').hide();
		}

	    else{    
	    	$('#duur').hide();
	    	$(this).val("Duur toevoegen");
	    	$('#duration').val(0);
	    	$('#pagButton').show();
			}
		
     });
     $('#pagButton').click(function () { 
    	 if($(this).val()=="Aantal pagina's toevoegen"){ 
        $('#pages').val(0);	 
    	$('#pag').show();
    	$(this).val("Aantal pagina's verwijderen");
    	$('#duurButton').hide();
    	 }

    	 else{ 
    	    	$('#pag').hide();
    	    	$(this).val("Aantal pagina's toevoegen");
    	    	$('#pages').val(0);	
    	    	$('#duurButton').show();
    	    	 }
    	
     });

     jQuery('.numbersOnly').keyup(function () { 
    	    this.value = this.value.replace(/[^0-9\.]/g,'');
    	});


    </script>




				<div id="duur" style="display: none" class="numbersOnly">
					<p>
						duur: <input type="text" id="duration" name="duration" value=0>
					</p>
				</div>
				<div id="pag" style="display: none">
					<p>
						Aantal pagina's: <input type="text" id="pages" name="pages"
							value=0>
					</p>
				</div>

				</br>
				<div>
					<input type="submit" value="Milestone aanmaken"
						action="/Milestone" method="post" />
				</div>
			</form>


		</b> |

		<!-- close button is defined as close class -->
		<a href="#" class="close">Close it</a>

	</div>


	<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
	<div id="mask"></div>
</div>










